﻿@using Blog1._0.Areas.Admin.Models
@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_LayoutList.cshtml";
}
<style type="text/css">
    #defaultTable + .layui-table-view tbody > tr > td {
        padding: 0;
    }

        #defaultTable + .layui-table-view tbody > tr > td > .layui-table-cell {
            height: 80px;
            line-height: 80px;
        }

    .tdImg {
        width: 120px;
        height: 60px;
        max-width: none;
        cursor: pointer;
    }

    .layui-table-view {
        margin: 0;
    }
</style>
<div class="admin-main">
    <blockquote class="layui-elem-quote p10">
        <form id="formSearch" class="layui-form" action="">
            <div class="layui-form-item" style="margin-bottom:0px;">
                <div class="layui-col-md10">
                    <label class="layui-form-label">文章标题：</label>
                    <div class="layui-input-inline">
                        <input name="ArticleTitle" id="Title" lay-verify="" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">分类：</label>
                    <div class="layui-input-inline">
                        @Html.DropDownList("CatalogID", null, "-请选择分类-", new Dictionary<string, object> { { "lay-verify", "required" } })
                    </div>
                    <label class="layui-form-label">类型：</label>
                    <div class="layui-input-inline">
                        @Html.DropDownList("TypeID", null, "-请选择类型-", new Dictionary<string, object> { { "lay-verify", "required" } })
                    </div>
                    <label class="layui-form-label">状态：</label>
                    <div class="layui-input-inline">
                        @Html.StatusSelectHtml()
                    </div>
                </div>
                <div class="layui-col-md2">
                    @Html.SearchBtnHtml()
                    @Html.ResetBtnHtml()
                    <div style="float:right; padding: 5px 20px;">
                        @Html.TopToolBarHtml(ViewData["ActionFormRightTop"])
                    </div>
                </div>

            </div>
        </form>
    </blockquote>
    <div class="layui-field-box">
        <table id="defaultTable" lay-filter="defaultruv"></table>
        <!-- 这里的 checked 的状态只是演示 -->
        <script type="text/html" id="bar">
            @Html.ToolBarHtml(ViewData["ActionList"])
        </script>
    </div>
</div>
<script>
    layui.use(['table', 'common', 'form'], function () {
        var table = layui.table,
            form = layui.form,
            common = layui.common;

        var index = layer.load(1);//增加加载等待loading
        //表格
        table.render({
            id: 'defaultReload'
           , elem: '#defaultTable'
           , height: 'full-112' //高度最大化减去差值
            , url: '/Blog/Article/GetListJson' //数据接口
           , page: true //开启分页
           , cols: [[ //表头
             { checkbox: true, fixed: true },
             { title: '序号', width: 80, fixed: 'left', type: 'numbers' }
               , { field: 'Title', title: '标题' }
               , { field: 'ImgUrl', title: '封面', templet: '<div>{{showImg(d.ImgUrl)}}</div>' }
               , { field: 'CatalogName', title: '分类', width: 120 }
               , { field: 'TypeName', title: '类型', width: 80 }
               , { field: 'IsTop', title: '置顶', width: 80, templet: '<div>{{showDing(d.IsTop)}}</div>' }
               , { field: 'ViewTimes', title: '阅读数', width: 80 }
               , { field: 'IsActive', title: '状态', templet: '<div>{{showStatus(d.IsActive)}}</div>', unresize: true, width: 100, align: 'center' }
               , { field: 'CRT_Time', title: '创建时间', width: 160, sort: true, templet: '<div>{{showDate(d.CRT_Time)}}</div>' }
               , { field: '', title: '操作', toolbar: "#bar", width: 200, fixed: 'right' }
           ]],
            done: function (res) {   //返回数据执行回调函数
                layer.close(index);    //返回数据关闭loading
            }
        });
        var $ = layui.$, active = {
            reload: function () {
                var jsonWhere = urlToJson($("#formSearch").serialize());
                //执行重载
                table.reload('defaultReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                  , where: jsonWhere
                });
            }
        };
        //服务器排序
        table.on('sort(defaultruv)', function (obj) {
            table.reload('defaultReload', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
              , where: { //请求参数
                  field: obj.field //排序字段
                , order: obj.type //排序方式
              }
            });
        });
        $('#btnSearch').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //add
        $('#btnAdd').on('click', function () {
            common.openTop({
                title: '文章添加', w: '100%', h: '100%', content: '/Blog/Article/Add/'
            });
        });
        //监听工具条
        table.on('tool(defaultruv)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                common.openTop({
                    detail: true,
                    title: '文章详情', w: '100%', h: '100%', content: '/Blog/Article/Detail/' + data.Id, clickOK: function (index) {
                        common.close(index);
                    }
                });
            } else if (obj.event === 'del') {
                layer.confirm('确定要删除吗？', function (index) {
                    $.ajax({
                        url: "/Blog/Article/Delete",
                        type: "POST",
                        data: { "Id": data.Id },
                        dataType: "json",
                        success: function (data) {
                            if (data.state == "success") {
                                obj.del();//删除这一行
                                common.msgSuccess("删除成功");
                            } else {
                                common.msgError("删除失败");
                            }
                            layer.close(index);//关闭弹框
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                common.openTop({
                    title: '文章编辑', w: '100%', h: '100%', content: '/Blog/Article/Edit/?Id=' + data.Id
                });
            }
        });
    });
</script>
